<template>
	<view class="main">
		<navbar ref="navbar" :config="config" backColor="#fff">
			<!-- <text slot="right" class="page-tip" @click="showTip()">
				<text class="tip">免费领:{{count}}次</text>
				<text class="iconfont2">&#xe66b;</text>
			</text> -->
		</navbar>
		<div style="padding-top: 20px;">
			<welfareGoods :listData="listData" @tabChange="tabChange" paymentPage="fugou"></welfareGoods>
		</div>
		<u-loadmore :status="loadStatus" />
		<uni-popup class="tip-popup" ref="tipPopup" type="center" :mask-click="false" z-index="1000">
			<view class="content-box" style="width: 630rpx;">
				<view class="title">申领物资说明</view>
				<view class="content">
					<scroll-view scroll-y class="tip" style="width: 510rpx;max-height: 50vh;overflow-y: auto;">
						<view class="ql-editor-box">
							<jyf-parser :html="$mUtil.formatRichText(applyRule)" ref="article"></jyf-parser>
						</view>
					</scroll-view>
					<button class="btn" @click="closePopup()">知道了</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			jyfParser
		},
		data() {
			return {
				config: {
					back: true,
					title: '激活区商品',
					color: '#fff',
					backgroundColor: [1, "#FF721B"],
					statusBarFontColor: 'black',
					rightSlot: true
				},
				applyRule: '',
				count: '', // 免费领次数
				pageParams: {
					page: 1,
					limit: 10,
					order_type: 1, // 1是综合（设置的顺序），2是新品，3价格，4销量
					order_mode: '',
					area_feature: null ,// 0,普通商品,1服务体系礼包,2新人惠选区,3公益申领)
					category_id: 0
				},
				hxCategoryId: null,
				listData: [],
				loadStatus: 'loadmore', //loading / nomore
			}
		},
		onShow() {
			// this.getCount();
		},
		onLoad(options) {
			if (options && options.hxCategoryId) {
				this.hxCategoryId = options.hxCategoryId
				this.$set(this.config, 'title', '精选好物' || '商品列表');
			} else {
				this.$set(this.config, 'title', '兑换区');
			}
			this.getList(true);
			this.getApplyProtocol();
			this.$refs.navbar.init();
		},
		onPullDownRefresh() {
			this.getList(true);
			this.getApplyProtocol();
			uni.stopPullDownRefresh();
		},
		methods: {
			showTip() {
				this.$refs.tipPopup.open();
			},
			closePopup() {
				this.$refs.tipPopup.close();
			},
			//物质申领协议
			getApplyProtocol() {
				return this.$http.get('/protocolConfig/info/claiming-rules')
					.then(res => {
						if (res.code == 200) {
							this.applyRule = res.data.content
						}
					})
			},
			//获取免费领次数
			// getCount(){
			// 	this.$http.get('/freebaggive/limit',{})
			// 	.then(res=>{
			// 		if (res.code == 200) {
			// 			this.count = res.data;
			// 		}
			// 	})
			// },
			// 获取列表
			getList(isRefresh, needLoading = false) {
				let that = this;
				if (!isRefresh && this.loadStatus == 'nomore') {
					return false;
				}
				this.pageParams.page = isRefresh ? 1 : this.pageParams.page + 1;
				this.listData = isRefresh ? [] : this.listData;
				if (needLoading) {
					uni.showLoading({
						title: '努力加载中...',
						mask: true
					});
				}
				this.loadStatus = 'loading';
				// if (this.hxCategoryId) {
				// 	this.pageParams.hx_category_id = this.hxCategoryId
				// }
				// if (this.hxCategoryId) {
				// 	this.pageParams.area_feature = 1
				// } else {
				// 	this.pageParams.area_feature = 0;
				// 	this.pageParams.category_id=144
				// }
          this.pageParams.area_feature = 0;
          this.pageParams.category_id=122
				this.$http.get('/goodsareafeature/page', this.pageParams)
					.then(res => {
						if (res.code == 200) {
							let listData = that.listData;
							listData.push(...res.page.list);
							that.listData = listData;
							that.loadStatus = that.listData.length >= res.page.totalCount ? 'nomore' : 'loadmore';
						}
					})
					.finally(() => {
						if (needLoading) {
							uni.hideLoading();
						}
					})
			},
			tabChange(tab) {
				this.pageParams = {
					...this.pageParams,
					order_type: tab.index + 1,
					order_mode: tab.sort
				}
				this.getList(true);
			}
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 0 30rpx 0;

		/deep/ .tab-box {
			.tab {
				color: #474747;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 38rpx;
					left: 120rpx;
					width: 1rpx;
					height: 20rpx;
					background-color: #AAAAAA;
					// background: #ffffff;
				}

				&.active {
					font-weight: 400;
					color: #FF721B;
				}
			}

			.tab:last-child {
				&::before {
					content: none;
				}
			}
		}

		.page-tip {
			margin-right: 30rpx;

			.tip {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
				vertical-align: middle;
				margin-right: 13rpx;
			}

			.iconfont2 {
				font-size: 45rpx;
				color: #666666;
				vertical-align: middle;
			}
		}

		.ql-editor-box {

			// 重写全局的 富文本样式，减去左右内边距（padding）
			/deep/ .ql-indent-3 {
				margin-left: calc(288rpx - 240rpx);
			}

			/deep/ .ql-indent-4 {
				margin-left: calc(384rpx - 240rpx);
			}

			/deep/ .ql-indent-5 {
				margin-left: calc(480rpx - 240rpx);
			}

			/deep/ .ql-indent-6 {
				margin-left: calc(576rpx - 240rpx);
			}

			/deep/ .ql-indent-7 {
				margin-left: calc(672rpx - 240rpx);
			}

			/deep/ .ql-indent-8 {
				margin-left: calc(768rpx - 240rpx);
			}

			/deep/ .ql-indent-4 {
				margin-left: calc(240rpx - 240rpx);
			}

			/deep/ .ql-indent-5 {
				margin-left: calc(300rpx - 240rpx);
			}
		}
	}
</style>
